@import "../common/_common.scss";
.menu{
    color: $black;
    font-size:$px18;
    position: relative;
    background:$cfff;
    z-index: 5;
    border-bottom: 2px solid #000000;
    padding-top:15px;
    .nav{
        width:$px1190;
        margin:0 auto;
        height: 36px; 
        line-height: 36px;
    }
    .categorys{
        width: 220px;
        float: left;
        background-color:$yellow;
        margin-right: 15px;
        height: 36px;
        .iconmenu{
            display:inline-block;
            width: 14px;
            height: 12px;
            margin:0 12px 0 20px;
            background-image: url(../../img/menuicon.png);
        }
        .arror{
          float: right;
          width: 14px;
          height: 7px;
          background: url(../../img/arrow_white.png) no-repeat;
          display: inline;
          margin: 15px 10px 0 0;
        }
        .arror_up{background-position: 0 -7px;}

    }
    ul.channel{       
        margin-left:290px;
        margin:0 auto;
        li.list{           
           float:left;
           height: 36px;
           line-height: 36px;
           a.item.current{
            color: #dba400;
           }
           a.item{
                color:$c000;
                padding:0 30px;
                display: inline-block;
                &:hover{
                    text-decoration: none;
                }
           }
           .popitem{
                display: inline-block;
                font-size: 14px;
                color: #333;
                z-index: 10;
                &:hover{
                    color: $fedStdColor_l3;
                }

           }
           i.xiang{
             background: url(../../img/index-icon.png) no-repeat -78px -125px;
             width: 20px;
             height: 18px;
             position: absolute;
             margin-left: 10px;
             top:-5px;
             right:0;
           }
           i.icontxt{
                color: #000;
                font-family: simsun;
                font-style: normal;
                font-size: 10px;
                vertical-align: middle;
                line-height:28px;

           }
           .icondown,.icontop{
                display: inline-block;
                width: 8px;
                height: 5px;
                background: url(../../img/icon_menudown.png) no-repeat 0 0;
                vertical-align:middle;

           }
           .icontop{
                background: url(../../img/icon_menutop.png) no-repeat 0 0;
           }

           .popmenu{
                width: 100%;
                background-color:#fff;
                position: absolute;
                z-index: 8;
                top:-8px;
                left:0;
                padding-top:8px;
                -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
                a.item{
                    color: #333;
                }
                .ul{
                    line-height: normal;
                    padding:10px 20px 20px 30px;
                    .lines{
                        border-bottom:1px dotted #ccc;
                        line-height: 26px;
                        &:hover{
                            i.icontxt{
                              color: $fedStdColor_l3;
                            }
                        }
                    }
                }

           }

        }
    }
}

.breadcrumb{
    width:$px1190;
    margin:8px auto;
    i{
        font-family: simsun;
        font-style: normal;
    }
    a{
        display: inline-block;
        text-decoration: none;
        color: $c333;
        font-size: 14px;
    }
}

.catebox{
    width: $px1190;
    margin: 0 auto;
}
.categorys-main{
    width: 220px;
    height: 450px;
    position: absolute;
    background-color:rgba(60,60,60,0.9);
    background-color/*\**/:#3C3C3C\9;
    filter:alpha(opacity=95);
    z-index: 110;
    margin-top: 0px;
    .category-content{
        padding:1px 0 12px;
        .navitem{
           height: 40px;
           line-height: 20px;
            background: url(../../img/categorys-line.png) no-repeat center top ;
            padding:9px 0 7px 20px;
            font-weight: bolder;
            &:hover{
                background-color:$fedStdColor_l4;
                a.item{
                    color: $black;
                }
                .icon-toleft{
                    background:none;
                }
            }
            
        }
        .navitem-0{background:none}
        .current{
            background-color:#fbfbfb;
            a.item{
                color: #ff6600;
            }
            .icon-toleft{
                background:none;
            }
        }
        .icon-toleft{
            display: inline-block;
            width: 5px;
            height:32px;
            background: url(../../img/icontoright.png) no-repeat center center;
        }
        a.item{
            color: $cfff;
            display: inline-block;
            cursor: pointer;
            &:hover{
                color: #ff6600;
            }
        }
        .sec_sort{
          display: block;
          font-size:14px;
          font-weight: normal;
          height: 21px;
          overflow: hidden;
          .item{
             margin-right: 12px;
          }
        }


    }

}

.categorys-detail{
    width: 969px;
    margin-left: 220px;
    height: 448px;
    overflow: hidden;
    background:#fff;
    position: absolute;
    border:1px solid #818181;
    border-left:none;
    z-index: 110;
    .hotnav{
        line-height: 1;
        width: 750px;
        float: left;
        background:#fbfbfb;
        padding:15px 10px 20px 0;
        height: 405px;

        overflow: hidden;
        .dl{
            margin-bottom: 30px;
        }
        .detailitem{
            overflow: hidden;
            width: 640px;
            float: left;
        }
        .title{
            width: 96px;
            text-align: right;
            float: left;
            padding:5px 10px 0 0;
            a{
                color: #333;
                &:hover{
                    text-decoration: none;
                }
            }

        }
        .item{
            display:inline-block;
            padding:0 10px;
            border-left: 1px solid #ccc;
            color: #787878;
            margin:5px 0 5px -1px;
            &:hover{
                text-decoration: none;
            }
        }

    }
    .brand{
        margin-left: 750px;
        height: 440px;
        padding:4px 0;
        img{
            margin:12px auto 0;
            &:hover{
                -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            }
        }
    }

}

